<template>
  <el-dialog :title="'排房'" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true">
    <div class="roomPicker">
      <div class="flexBox">
        <div>
          <label style="flex-shrink: 0;">房型</label>
          <ul>
            <li @click="selTag(item, index, 'room')" v-for="(item, index) in roomList" :key="index" class="VC" style="text-align: center;">
              {{ item.name }} 
              <!-- {{ item.count ? item.count : '0' }} -->
              <i v-if="item.checked" class="el-icon-check g_icon"></i>
            </li>
          </ul>
        </div>
      </div>
      <div class="flexBox">
        <div>
          <label style="flex-shrink: 0;">房态</label>
          <ul>
            <li
              @click="selTag(item, index, 'type')"
              v-for="(item, index) in colorName"
              :key="index"
              class="VC"
              style="text-align: center;"
              :style="'border-left: 3px solid ' + color[index]"
            >
              {{ item.name }} 
              <!-- {{ typeMap[index + ''] ? typeMap[index + ''] : '0' }} -->
              <i v-if="item.checked" class="el-icon-check g_icon"></i>
            </li>
          </ul>
        </div>
      </div>

      <div class="flexBox">
        <div>
          <div class="roomList">
            <div class="flexBox">
              <div class="special_td">
                <div class="clear_float">
                  <span>已排房: {{ dataList.filter(item => item.checked).length }} 间</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flexBox">
        <div>
          <div class="roomList">
            <div class="flexBox">
              <div class="special_td">
                <div class="clear_float">
                  <el-tag effect="plain" v-for="item in dataList.filter(item => item.checked)" :key="item.name" closable @close="item.checked = false">
                    {{ item.roomSign }}{{ item.roomNum }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flexBox">
        <div>
          <div class="roomList">
            <div class="flexBox">
              <div>
                <ul>
                  <li
                    v-for="(item, index) in dataList"
                    :key="item.id"
                    @click="item.checked = !item.checked"
                    :style="'border-left: 3px solid ' + (color[item.type + ''] ? color[item.type + ''] : color['0'])"
                    style="position: relative;"
                  >
                    {{ item.roomSign }}{{ item.roomNum }}
                    <i v-if="item.checked" class="el-icon-check g_icon"></i>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="text-align: right;" solt="footer">
        <el-button @click="visible = false">{{ $t('Common.Cancel') }}</el-button>
        <el-button type="danger" @click="dataFormSubmit">确定</el-button>
      </div>
      <!-- 房间 -->
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      oldList: [],
      dataForm: {
        key: '',
        floorIds: ''
      },
      visible: false,
      dataList: [],
      dataList2: [],
      roomList: [],
      roomCount: 0,
      color: {},
      colorName: [
        {
          name: '空净',
          checked: false
        },
        {
          name: '空脏',
          checked: false
        },
        {
          name: '住净',
          checked: false
        },
        {
          name: '住脏',
          checked: false
        }
      ],
      colorCount: [0, 0, 0, 0, 0, 0],
      typeMap: {},
      typeMapCount: 0
    };
  },
  methods: {
    init(list) {
      this.oldList = list;
      console.log(list);
      this.visible = true;
      this.getfangtaiTypeList();
      this.getDataList();
    },
    selTag(item, index, sign) {
      var checked = item.checked;
      if (sign == 'type') {
        this.colorName.forEach(item => {
          item.checked = false;
        });
        item.checked = !checked;
      }
      if (sign == 'room') {
        this.roomList.forEach(item => {
          item.checked = false;
        });
        item.checked = !checked;
      }
      this.getDataList();
    },
    // 表单提交
    dataFormSubmit() {
      this.visible = false;
      this.$emit('refreshDataList', this.dataList.filter(item => item.checked));
    },
    // 获取房态数据列表
    getDataList() {
      //房间状态类型
      var types = '';
      this.colorName.forEach((item, index) => {
        if (item.checked) {
          types += index + ',';
        }
      });
      types = types.substring(0, types.length - 1);
      //房型类型
      var roomIds = '';
      this.roomList.forEach((item, index) => {
        if (item.checked) {
          roomIds += item.roomId + ',';
        }
      });
      roomIds = roomIds.substring(0, roomIds.length - 1);
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelfloorroom/roomState'),
        method: 'get',
        params: this.$http.adornParams({
          key: this.dataForm.key,
          types: types,
          rooms: roomIds,
          floors: this.dataForm.floorIds
        })
      }).then(async ({ data }) =>  {
        if (data && data.code === 0) {
          this.dataList = data.data.data
            .filter(item => item.type != 4 && item.lockType == 1 && item.isSingle == 0)
            .map(item => ({
              ...item,
              checked: false
            }));
          for (var i = 0; i < this.dataList.length; i++) {
            var flag = await this.filterRoom(this.dataList[i])
            if (flag) {
              this.dataList[i].checked = true;
            }
          }
        } else {
          this.dataList = [];
        }
      });

    },
    async filterRoom(item) {
      var list = this.oldList;
      for (var i = 0; i < list.length; i++) {
        if (item.id == list[i].id) {
          return true;
        }
      }
      return false;
    },
    // 获取房态数据列表
    getDataList2() {},
    // 获取房态数据列表
    getfangtaiTypeList() {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelfloorroom/roomStateOptions'),
        method: 'get',
        params: this.$http.adornParams({
          key: this.dataForm.key,
          floors: this.dataForm.floorIds
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.color = data.data.color;
          this.typeMap = data.data.typeMap;
          this.roomList = data.data.roomList.map(item => ({
            ...item,
            checked: false
          }));
          this.floorOptions = data.data.floorList;
          this.typeMapCount = data.data.typeMapCount;
          this.setting = data.data.setting;
          this.roomCount = 0;
          data.data.roomList.forEach(item => {
            this.roomCount += item.count;
          });
        } else {
          this.dataList = [];
        }
      });
    }
  }
};
</script>

<style>
.roomPicker .roomList ul > li {
  margin: 5px;
  width: 68px;
  text-align: center;
}
.roomPicker ul > li {
  float: left;
  margin-left: 5px;
  padding: 3px 8px;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  margin-bottom: 5px;
  position: relative;
}
.g_icon {
  position: absolute;
  color: #f24e4c;
  bottom: -2px;
  right: -1px;
  line-height: normal;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
.roomPicker ul {
  list-style-type: none;
  padding-left: 0px;
  margin-top: 0px;
}
.roomPicker ul > li:hover {
  border: 1px solid #f24e4c !important;
  color: #f24e4c;
  background-color: white;
}
.roomPicker ul > li.disabled:hover {
  border: 1px solid #d9d9d9 !important;
  color: inherit;
  background: transparent;
  cursor: default;
}
.flexBox,
.flexBox > div {
  display: flex;
  align-items: center;
}
.flexBox {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.ant-layout-footer {
  background: #fff;
  text-align: right;
  border-top: 1px solid #e8e8e8;
}
.special_td {
  line-height: 20px;
  background: #f7f7f7;
  padding: 10px;
  border-radius: 3px;
  color: #000;
}
.el-tag {
  margin-right: 5px;
}

.el-tag:last-child {
  margin-right: 0px;
}
</style>
